<template>
	<view>
		<view class="top-box">
			<view class="u-search-box" @click="gosearch()" v-if="name != 'telBook'">
				<view class="u-search-inner">
					<u-icon name="search" color="#fff" :size="20"></u-icon>
					<text class="u-search-text">Search keywords</text>
				</view>
			</view>
			<u-swiper class="top-img" height="200" :list="topList" :keyName="keyName" imgMode="scaleToFill" :indicator="true" indicatorMode="dot">
			</u-swiper>
		</view>
	</view>
</template>

<script>
	export default {
		name: "swiperSearch",
		data() {
			return {

			};
		},
		props: {
			topList: {
				type: Array,
				default(){
					return[]
				}
			},
			keyName:{
				type:String,
				default:'imgsrc'
			},
			name:{
				type:String,
				default:''
			}
		},
		methods:{
			gosearch(){
				if(this.name == 'news'){
					return
				}
				uni.navigateTo({
					url:"/pages/searchbox/index?name="+this.name
				})
				
			}
		}
	}
</script>

<style lang="scss">
	.top-box {
		position: relative;
		padding: 30rpx 30rpx 0;
		background-color: #FFFFFF;
		.u-search-box {
			position: absolute;
			top: 50rpx;
			left: 40rpx;
			z-index: 1;
			color: #FFFFFF;
			.u-search-inner {
				background-color: rgba(0, 0, 0, .3);
				border-radius: 100rpx;
				display: flex;
				align-items: center;
				padding: 10rpx 30rpx;
				color: #FFFFFF;
			}
			.u-search-text {
				font-size: 24rpx;
				color: $u-tips-color;
				color: #FFFFFF;
				margin-left: 10rpx;
			}
		}

		.top-img {
			border-radius: 30rpx;
			image {
				border-radius: 30rpx;
			}
		}
	}
</style>
